<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>井字棋</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }

      body {
        display: flex;
        justify-content: center;
        align-items: center;
        min-height: 100vh;
        flex-direction: column;
      }

      h1 {
        font-size: 50px;
      }
      p {
        margin-bottom: 50px;
      }

      #main td {
        position: relative;
        width: 100px;
        height: 100px;
        border: 1px solid #000;
        font-size: 50px;
      }
      #main td svg {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 80%;
        height: auto;
      }

      #p1,
      #p2,
      #draw {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        font-size: 100px;
        display: none;
      }
    </style>
  </head>
  <body>
    <h1>井字棋</h1>
    <p>By Ckblt</p>
    <table id="main">
      <tr>
        <td></td>
        <td></td>
        <td></td>
      </tr>
      <tr>
        <td></td>
        <td></td>
        <td></td>
      </tr>
      <tr>
        <td></td>
        <td></td>
        <td></td>
      </tr>
    </table>
    <h1 id="draw">Draw!</h1>
    <h1 id="p1">P1 Wins!</h1>
    <h1 id="p2">P2 Wins!</h1>
    <script>
      const STATE = {
        NULL: 0,
        P1: 1,
        P2: 2
      }
      const ticTacToe = [
        STATE.NULL,
        STATE.NULL,
        STATE.NULL,
        STATE.NULL,
        STATE.NULL,
        STATE.NULL,
        STATE.NULL,
        STATE.NULL,
        STATE.NULL
      ]
      const elem = document.getElementById('main')
      let player = 1
      let win = null

      const render = () => {
        elem.querySelectorAll('td').forEach((e, i) => {
          switch (ticTacToe[i]) {
            case STATE.NULL:
              e.innerHTML = ''
              break

            case STATE.P1:
              e.innerHTML =
                '<svg t="1643371128605" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2199" width="200" height="200"><path d="M512.00337692 223.62507194c-39.07811828 0-76.40824868 7.54812851-112.02349786 22.7966725-35.61524846 15.24854397-66.28448731 35.85361048-92.03419966 61.53711098-25.75633368 25.82254479-46.28194643 56.45205638-61.51062641 92.02757833-15.26178662 35.70794488-22.88274757 72.93213694-22.88274757 112.07646705 0 39.01190645 7.62096168 76.36852217 22.88274757 111.94404411 15.22868071 35.71456621 35.75429346 66.3440778 61.51062641 92.1666226 25.74971235 25.69012185 56.41895047 46.14952278 92.03419966 61.53049039a284.03475437 284.03475437 0 0 0 112.02349786 22.80329382c39.06487635 0 76.39500676-7.69379412 112.01025522-22.80329382 35.61524846-15.38096763 66.28448731-35.84698987 92.03419965-61.5304904 25.75633368-25.82254479 46.28194643-56.45205638 61.51062642-92.16662258 15.28827122-35.57552195 22.88274757-72.93213694 22.88274758-111.94404412 0-39.1443301-7.5944771-76.36852217-22.88274758-112.07646704-15.22868071-35.57552195-35.75429346-66.21165414-61.51062642-92.03419894-25.74971235-25.67687918-56.41895047-46.28194643-92.03419965-61.53049038C588.39838368 231.17982179 551.06163194 223.62507194 511.99675559 223.62507194m0-82.41364616c50.20167629 0 98.25809517 9.75297643 144.02359033 29.39797427 45.79860107 19.63837652 85.22764104 46.0104785 118.27387798 79.10968462 33.07272152 32.96678243 59.41833818 72.38920181 79.03023011 118.2606353 19.61851326 45.73901058 29.43770153 93.81529271 29.45094418 143.94413656 0.03972724 50.27450871-9.81918826 98.35079085-29.45094418 144.08980216-19.62513458 45.87143423-45.97075126 85.29385288-79.03023011 118.254014-33.03299426 33.10582743-72.43554966 59.47792868-118.27387797 79.12292725C610.19526027 872.88993219 562.19181056 882.78195289 512.00337692 882.78195289c-50.18843363 0-98.19188333-9.89202143-144.02359031-29.39797427-45.85157025-19.63837652-85.26736828-46.0104785-118.28712063-79.1096846C216.62656579 741.30751156 190.28757045 701.8850922 170.66243587 656.00703736 151.03068066 610.27464813 141.17176516 562.19836599 141.21149168 511.93047787c0.01324266-50.13546446 9.83243092-98.21174661 29.45094419-143.94413656 19.61189194-45.88467617 45.950888-85.3004742 79.03023011-118.26725664 33.0396156-33.10582743 72.47527689-59.47130809 118.28712063-79.11630594C413.73866043 150.96440221 461.78845799 141.21142578 511.99675559 141.21142578" p-id="2200"></path></svg>' // ???
              break

            case STATE.P2:
              e.innerHTML =
                '<svg t="1643371178726" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3050" width="200" height="200"><path d="M886.784 746.496q29.696 30.72 43.52 56.32t-4.608 58.368q-4.096 6.144-11.264 14.848t-14.848 16.896-15.36 14.848-12.8 9.728q-25.6 15.36-60.416 8.192t-62.464-34.816l-43.008-43.008-57.344-57.344-67.584-67.584-73.728-73.728-131.072 131.072q-60.416 60.416-98.304 99.328-38.912 38.912-77.312 48.128t-68.096-17.408l-7.168-7.168-11.264-11.264-11.264-11.264q-6.144-6.144-7.168-8.192-11.264-14.336-13.312-29.184t2.56-29.184 13.824-27.648 20.48-24.576q9.216-8.192 32.768-30.72l55.296-57.344q33.792-32.768 75.264-73.728t86.528-86.016q-49.152-49.152-93.696-93.184t-79.872-78.848-57.856-56.832-27.648-27.136q-26.624-26.624-27.136-52.736t17.92-52.736q8.192-10.24 23.552-24.064t21.504-17.92q30.72-20.48 55.296-17.92t49.152 28.16l31.744 31.744q23.552 23.552 58.368 57.344t78.336 76.288 90.624 88.576q38.912-38.912 76.288-75.776t69.632-69.12 58.368-57.856 43.52-43.008q24.576-23.552 53.248-31.232t55.296 12.8q1.024 1.024 6.656 5.12t11.264 9.216 10.752 9.728 7.168 5.632q27.648 26.624 27.136 57.856t-27.136 57.856q-18.432 18.432-45.568 46.08t-60.416 60.416-70.144 69.632l-77.824 77.824q37.888 36.864 74.24 72.192t67.584 66.048 56.32 56.32 41.472 41.984z" p-id="3051"></path></svg>' // ?????
              break

            default:
              break
          }
        })
      }

      const judge = () => {
        console.log(ticTacToe)
        if (
          (ticTacToe[0] === STATE.P1 &&
            ticTacToe[1] === STATE.P1 &&
            ticTacToe[2] === STATE.P1) ||
          (ticTacToe[3] === STATE.P1 &&
            ticTacToe[4] === STATE.P1 &&
            ticTacToe[5] === STATE.P1) ||
          (ticTacToe[6] === STATE.P1 &&
            ticTacToe[7] === STATE.P1 &&
            ticTacToe[8] === STATE.P1) ||
          //
          (ticTacToe[0] === STATE.P1 &&
            ticTacToe[3] === STATE.P1 &&
            ticTacToe[6] === STATE.P1) ||
          (ticTacToe[1] === STATE.P1 &&
            ticTacToe[4] === STATE.P1 &&
            ticTacToe[7] === STATE.P1) ||
          (ticTacToe[2] === STATE.P1 &&
            ticTacToe[5] === STATE.P1 &&
            ticTacToe[8] === STATE.P1) ||
          //
          (ticTacToe[0] === STATE.P1 &&
            ticTacToe[4] === STATE.P1 &&
            ticTacToe[8] === STATE.P1) ||
          (ticTacToe[2] === STATE.P1 &&
            ticTacToe[4] === STATE.P1 &&
            ticTacToe[6] === STATE.P1)
        )
          win = 1
        else if (
          (ticTacToe[0] === STATE.P2 &&
            ticTacToe[1] === STATE.P2 &&
            ticTacToe[2] === STATE.P2) ||
          (ticTacToe[3] === STATE.P2 &&
            ticTacToe[4] === STATE.P2 &&
            ticTacToe[5] === STATE.P2) ||
          (ticTacToe[6] === STATE.P2 &&
            ticTacToe[7] === STATE.P2 &&
            ticTacToe[8] === STATE.P2) ||
          //
          (ticTacToe[0] === STATE.P2 &&
            ticTacToe[3] === STATE.P2 &&
            ticTacToe[6] === STATE.P2) ||
          (ticTacToe[1] === STATE.P2 &&
            ticTacToe[4] === STATE.P2 &&
            ticTacToe[7] === STATE.P2) ||
          (ticTacToe[2] === STATE.P2 &&
            ticTacToe[5] === STATE.P2 &&
            ticTacToe[8] === STATE.P2) ||
          //
          (ticTacToe[0] === STATE.P2 &&
            ticTacToe[4] === STATE.P2 &&
            ticTacToe[8] === STATE.P2) ||
          (ticTacToe[2] === STATE.P2 &&
            ticTacToe[4] === STATE.P2 &&
            ticTacToe[6] === STATE.P2)
        )
          win = 2
        else if (
          ticTacToe[0] !== 0 &&
          ticTacToe[1] !== 0 &&
          ticTacToe[2] !== 0 &&
          ticTacToe[3] !== 0 &&
          ticTacToe[4] !== 0 &&
          ticTacToe[5] !== 0 &&
          ticTacToe[6] !== 0 &&
          ticTacToe[7] !== 0 &&
          ticTacToe[8] !== 0
        )
          win = 0

        switch (win) {
          case 0:
            elem.style.opacity = '0.5'
            document.getElementById('draw').style.display = 'block'
            break

          case 1:
            elem.style.opacity = '0.5'
            document.getElementById('p1').style.display = 'block'
            break

          case 2:
            elem.style.opacity = '0.5'
            document.getElementById('p2').style.display = 'block'
            break

          default:
            break
        }
      }

      render()

      elem.querySelectorAll('td').forEach((e, i) => {
        e.addEventListener('click', () => {
          if (win === null && ticTacToe[i] === STATE.NULL) {
            ticTacToe[i] = player
            player === 1 ? (player = 2) : (player = 1)

            render()
            judge()
          }
        })
      })
    </script>
  </body>
</html>